<div class="lib-manager-box">
    <div class="header">
        <div class="btn ccenter" (click)="back()" nz-tooltip [nzTooltipTitle]="'LIB_MANAGER.BACK' | translate">
            <i class="fa-regular fa-chevron-left"></i>
        </div>
        <nz-input-group [nzSuffix]="suffixIconSearch" [nzSize]="'small'">
            <input type="text" nz-input [placeholder]="'LIB_MANAGER.SEARCH_LIBRARY' | translate" [(ngModel)]="keyword"
                spellcheck="false" (ngModelChange)="search()" />
        </nz-input-group>
        <ng-template #suffixIconSearch>
            @if(keyword.length > 0){
            <i class="fa-light fa-xmark" (click)="keyword='';search()"></i>
            } @else {
            <i class="fa-light fa-search"></i>
            }
        </ng-template>
        <div class="tag-list">
            <nz-tag (click)="keyword='';search()">{{ 'LIB_MANAGER.ALL' | translate }}</nz-tag>
            @for (tag of tagList; track tag) {
            <nz-tag (click)="keyword=tag;search()">{{ tag }}</nz-tag>
            }
            <span style="position: absolute;top: 10px;color: #444;">|</span>
            <nz-tag style="margin-left: 11px;" (click)="keyword='已安装';search()">{{ 'LIB_MANAGER.INSTALLED' | translate
                }}</nz-tag>
            <nz-tag (click)="keyword='核心库';search()">{{ 'LIB_MANAGER.CORE_LIBRARY' | translate }}</nz-tag>
        </div>
    </div>
    <div class="lib-list">
        @for( lib of libraryList;track lib.name ) {
        <div class="lib-item">
            @if(lib.tested){
            <div class="state"></div>
            }
            <div class="name ellipsis">{{lib.nickname}}
                @if(!lib.tested){
                <span class="error">(未测试)</span>
                }@else{
                <span>{{lib.author}}</span>
                }
            </div>
            <div class="desc ellipsis">
                <div class="icon ccenter">
                    @if(lib.icon==''){
                    <i class="fa-light fa-cube"></i>
                    }@else{
                    <i class="{{lib.icon}}"></i>
                    }
                </div>
                {{lib.description}}
            </div>
            <div class="footer">
                <div class="version">
                    {{'version: '+lib.version}}
                    <!-- <nz-select [(ngModel)]="lib.version" [nzSize]="'small'" (nzOnSearch)="getVerisons(lib)">
                        @if (!loading) {
                        @for (version of lib.versionList; track version) {
                        <nz-option [nzValue]="version" [nzLabel]="version"></nz-option>
                        }
                        } @else {
                        <nz-option nzDisabled nzCustomContent>
                            <div class="icon lloading ccenter" style="margin-left: -10px;">
                                <i class="fa-duotone fa-solid fa-loader" style="margin-right: 10px;"></i>
                            </div>
                        </nz-option>
                        }
                    </nz-select> -->
                </div>
                <div class="btns">
                    @if (lib.example) {
                    <button nz-button nzSize="small" style="margin-right: 5px;"
                        (click)="openExample(lib.example)">示例</button>
                    }
                    @if(isInstalled(lib)) {
                    <button nz-button nzType="default" nzSize="small" [disabled]="true">{{ 'LIB_MANAGER.INSTALLED_TEXT'
                        | translate }}</button>
                    <button nz-button nzType="text" nzDanger nzSize="small" (click)="removeLib(lib)"
                        [disabled]="lib.state=='uninstalling'">{{ 'LIB_MANAGER.REMOVE' | translate }}</button>
                    }@else{
                    <button nz-button nzType="primary" nzSize="small" (click)="installLib(lib)"
                        [disabled]="lib.state=='installing'">{{ 'LIB_MANAGER.INSTALL' | translate }}</button>
                    }
                </div>
            </div>
        </div>
        }
    </div>
</div>